<template>
  <el-table
    height="100%"
    :header-cell-style="{color:'#4E5258'}"
    style="width:100%"
    :data="data"
    :row-key="rowKey"
    @selection-change="selectionChange"
    border
    :summary-method="getSummaries"
    :show-summary="summary?true:false">
    <el-table-column
      type="index"
      align="center"
      :index="index"
      :width="fixWidth">
    </el-table-column>
    <el-table-column
      type="selection"
      align="center"
      :resizable="false"
      reserve-selection>
    </el-table-column>
    <template v-for="h in head">
      <el-table-column v-if="h.customize"
        header-align="center"
        :key="h.prop"
        :label="h.label"
        :width="h.width"
        :align="h.align">
        <template v-slot="scope">
          <slot :name="h.prop" :row="scope.row">{{scope.row[h.prop]}}</slot>
        </template>
      </el-table-column>
      <el-table-column v-else
        header-align="center"
        :key="h.prop"
        :prop="h.prop"
        :label="h.label"
        :width="h.width"
        :align="h.align"
        show-overflow-tooltip>
      </el-table-column>
    </template>
  </el-table>
</template>
<script>
export default {
  name: 'Table',
  data: function () {
    return {
      selections: []
    }
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    head: {
      type: Array,
      required: true
    },
    index: {
      type: Number,
      default: 1
    },
    rowKey: {
      type: String,
      required: true
    },
    summary: {
      type: Object
    }
  },
  methods: {
    selectionChange (val) {
      this.selections = val
    },
    getSummaries (param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t('global.total')
          return
        }
        if (column.property in this.summary) {
          sums[index] = this.summary[column.property]
        } else {
          sums[index] = ''
        }
      })
      return sums
    }
  },
  computed: {
    fixWidth () {
      return ((this.index + this.data.length).toString().length + 2) * 10
    }
  }
}
</script>
